<template>
	<div class="person">
		<h1>我是Person组件</h1>
		<h3>
			姓名：{{name}}
			<button @click="name = 'xiao-high'">点我修改名字(报错)</button>
		</h3>
		<h3>
			年龄：{{age}}
			<button @click="age++">点我年龄+1(报错)</button>
		</h3>
		<h3>
			性别：{{sex}}
			<button @click="sex = '女'">点我修改性别(报错)</button>
		</h3>
		<h3>
			爱好：
			<button @click="hobby.push('跳舞')">点我添加一个爱好(不报错)</button>
			<button @click="hobby = ['抽烟','喝酒','烫头'] ">点我替换整个爱好(报错)</button>
		</h3>
		<ul>
			<li v-for="(h,index) in hobby" :key="index">{{h}}</li>
		</ul>
		<h3>
			座驾：
			<button @click="cars.c1 = '保时捷'">点我修改第一个座驾</button>
			<button @click="cars = {c1:'保时捷',c2:'小牛电动车'} ">点我修改整个座驾</button>
		</h3>
		<ul>
			<li v-for="(v,k) in cars" :key="k">{{v}}</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name:'Person',
		props:['name','sex','age','hobby','cars'],
	}
</script>

<style scoped>
	.person{
		background-color: skyblue;
		padding: 20px;
	}
</style>